<template>
    <div class="e1">

        <div class="p3">

            <div class="p4">
                <div>{{ $t('text.House.l29') }}</div>
                <DialogLayout27 :dataList="entrustData" @returnData="setData">
                    <el-button round style="height: 28px;width: 80px;color: #6698ff;border: 1px solid #6698ff;">{{
                        $t('text.House.l26') }}</el-button>
                </DialogLayout27>
            </div>

            <div class="p5">
                <div style="flex: 1;">
                    <div class="e2">{{ $t('text.House.l30') }}</div>
                    <div class="e3">{{ entrustData.entrustType == '0' ? $t('text.DialogLayout.l57') :
                        entrustData.entrustType == '1' ?
                            $t('text.DialogLayout.l58') : '' }}</div>
                </div>
                <div style="flex: 1;">
                    <div class="e2">{{ $t('text.House.l31') }}</div>
                    <div class="e3">
                        {{ entrustData.entrustTermStart != '' && entrustData.entrustTermStart != null &&
                            entrustData.entrustTermStart != undefined ?
                            entrustData.entrustTermStart.split(" ")[0] : '' }}&ensp;-&ensp;
                        {{ entrustData.entrustTermEnd != '' && entrustData.entrustTermEnd != null &&
                            entrustData.entrustTermEnd != undefined ?
                            entrustData.entrustTermEnd.split(" ")[0] : '' }}</div>
                </div>
                <div style="flex: 1;">
                    <div class="e2">{{ $t('text.House.l32') }}</div>
                    <div class="e3">
                        {{ entrustData.tradeType == '0' ? $t('text.DialogLayout.l60') : entrustData.tradeType == '1' ?
                            $t('text.DialogLayout.l61') : entrustData.tradeType == '2' ? $t('text.DialogLayout.l62') : '' }}
                    </div>
                </div>
                <div style="flex: 1;">
                    <div class="e2">{{ $t('text.House.l33') }}</div>
                    <div class="e3">{{ entrustData.realName }}</div>
                </div>
            </div>
        </div>

        <div class="p3">
            <div class="p4">
                <div>{{ $t('text.House.l34') }}</div>
                <div class="p7"></div>
            </div>
            <div class="p5">
                <div>
                    <CommonUploadImg :hit="$t('text.DialogLayout.l126')" :limit="1" :fileList="fileList1" disabled>
                    </CommonUploadImg>
                    <div class="t3" style="text-align: center;">{{ $t('text.DialogLayout.l129') }}</div>
                </div>
                <div style="width: 30px;"></div>
                <div>
                    <CommonUploadImg :hit="$t('text.House.l35')" :limit="1" :fileList="fileList2" disabled>
                    </CommonUploadImg>
                    <div class="t3" style="text-align: center;">{{ $t('text.DialogLayout.l130') }}</div>
                </div>
                <div style="width: 30px;"></div>
                <div>
                    <CommonUploadImg :hit="$t('text.House.l36')" :limit="1" :fileList="fileList3" disabled>
                    </CommonUploadImg>
                    <div class="t3" style="text-align: center;">{{ $t('text.DialogLayout.l131') }}</div>
                </div>
            </div>
        </div>

    </div>
</template>
    
<script>
import DialogLayout27 from '@/components/dialogLayout/DialogLayout27.vue'
import { entrustGet } from '../../http/api'
import CommonUploadImg from '@/components/input/CommonUploadImg.vue'
export default {
    name: 'EntrustDetail',
    components: {
        DialogLayout27,
        CommonUploadImg
    },
    data() {
        return {
            entrustData: {},
            fileList1: [],
            fileList2: [],
            fileList3: [],
            isLoad: false
        }
    },
    mounted() {
        entrustGet({ houseId: this.$route.query.id }).then(res => {
            if (res !== undefined) {
                this.entrustData = res
                this.isLoad = true
                if (res.entrustFilePath != '' && res.entrustFilePath != null) {
                    this.fileList1 = [{ url: res.entrustFilePath }]
                }
                if (res.identityFilePath != '' && res.identityFilePath != null) {
                    this.fileList2 = [{ url: res.identityFilePath }]
                }
                if (res.houseFilePath != '' && res.houseFilePath != null) {
                    this.fileList3 = [{ url: res.houseFilePath }]
                }
            }
        }).catch()
    },
    methods: {
        setData(params) {
            this.entrustData = params
            if (params.entrustFilePath != '' && params.entrustFilePath != null) {
                this.fileList1 = [{ url: params.entrustFilePath }]
                this.limit1 = 1
            }
            if (params.identityFilePath != '' && params.identityFilePath != null) {
                this.fileList2 = [{ url: params.identityFilePath }]
                this.limit2 = 1
            }
            if (params.houseFilePath != '' && params.houseFilePath != null) {
                this.fileList3 = [{ url: params.houseFilePath }]
                this.limit3 = 1
            }
        }
    },
    watch: {

    },
    computed: {

    }

}
</script>

<style scoped>
.e1 {
    height: 100%;
    width: 100%;
    flex-direction: column;
    display: flex;
}

.e2 {
    font-size: 12px;
    color: gray;
    text-align: left;
    padding-left: 35px;
}

.e3 {
    font-size: 13px;
    color: black;
    text-align: left;
    padding-left: 35px;
    padding-top: 3px;
}

.p2 {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.p3 {
    margin-left: 35px;
    margin-right: 35px;
    display: flex;
    flex-direction: column;
    padding-bottom: 25px;
    border-bottom: 2px solid #eee;
    padding-top: 10px;
}

.p4 {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.p5 {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
}

.p6 {
    border: none;
    color: gray;
    outline: none;
    padding-top: 10px;
    padding-left: 10px;
}

.p7 {
    display: flex;
}
</style>